<!--
 * @Author: MSN
 * @Date: 2022-09-23 15:29:44
 * @LastEditTime: 2022-09-28 09:13:03
 * @LastEditors: MSN
 * @Description: 登录
 * @FilePath: \egoshop\src\views\Login\index.vue
-->
<template>
  <div class="login">
    <el-card class="box-card">
      <!-- <div slot="header" class="header">
        <span>登入|注册</span>
      </div> -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户登入" name="first">
          <el-form :model="form" label-width="60px">
            <el-form-item label="用户名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
          </el-form>
          <div class="footer">
            <el-button type="primary" round @click="onSubmit">立即登录</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户注册" name="second">
          <el-form :model="register" label-width="70px">
            <el-form-item label="用户名">
              <el-input v-model="register.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="register.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input type="password" v-model="register.rePassword"></el-input>
            </el-form-item>
          </el-form>
          <div class="footer">
            <el-button type="primary" round @click="onRegisterSubmit">立即注册</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import api from "@/api/index";
import { mapMutations } from "vuex";

export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      register: {},
      activeName: "first",
    };
  },
  methods: {
    ...mapMutations("LoginModule", ["setToken", "setUser"]),
    // 立即登入按钮
    onSubmit() {
      if (this.form.username && this.form.password) {
        api
          .getLogin({
            username: this.form.username,
            password: this.form.password,
          })
          .then((res) => {
            if (res.data.status === 200) {
              // 成功
              this.setToken(res.data.token);
              this.setUser(res.data.data[0].username);
              // 本地存储，用户在强制刷新的时候会将Vuex中的数据清空
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("egouser", res.data.data[0].username);
              this.$router.replace("/product");
            } else {
              // 失败
              this.$message.error(res.data.msg);
            }
          });
      } else {
        this.$message("请输入信息");
      }
    },
    // 立即注册按钮
    onRegisterSubmit(){
      if(this.register.username && this.register.password){
        api.getRegister({
          username: this.register.username,
          password: this.register.password
        }).then(res => {
          console.log('q',res);
          if(res.data.status === 200){
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.activeName = 'first'
          }else {
            this.$message.error(res.data.msg);
          }
        })
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped lang="scss">
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  background-image: url(../../assets/image/old-books.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-card {
  width: 400px;
  height: auto;

  .header {
    @include center;
  }

  .footer {
    @include center;
  }
}

.el-card {
  opacity: 0.85;
}
</style>
